<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_admin_framt::head(Z博客后台)">
 <meta charset="utf-8" /> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 <meta name="viewport" content="width=device-width, initial-scale=1"/> 
<title>博客后台</title>

<!--Bootstrap -->
 <link  href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 
 <link  href="../css/admin-side.css" rel="stylesheet" /> 
 <link  href="../css/admin-main.css" rel="stylesheet" /> 
 <link  href="../lib/editormd/css/editormd.css" rel="stylesheet" /> 
</head>
  
<body>
	<!--左侧-->
	<div id="admin-side" th:replace="admin/_admin_framt::admin-side">
	</div>
	<!--左侧结束-->

	<!--右侧-->
	<div id="admin-main">
	<!--右侧-导航条-->
		<header class="admin-header navbar-inverse" th:replace="admin/_admin_framt::admin-main-nav">
		</header>
	<!--右侧-主体-->
		<ol class="breadcrumb" style="margin-bottom: 0px;">
		  <li><a href="admin-index.html">Home</a></li>
		  <li class="active">博客发布</li>
		</ol>
		<div id="pubBlog" class="admin-main-body container-fluid" style="padding: 1rem;background: #fff">
			<div class="pubBlog" style="margin: 10px">
				
<!-- 				  <div class="form-group">
				    <input type="text" class="form-control"  placeholder="标题"/>
				  </div> -->
				  <div class="input-group" style="width:100%">
					<div class="btn input-group-addon" style="padding:0px;">
					<select class="btn input-group-addon" style="border: 0px;width:100px" 
						v-model="cateSelected">
					  <option v-bind:value="cate.cateid" v-for="cate in blogcates" >{{cate.catename}}</option>
					</select>
					</div>
					<input type="text" name="title" class="form-control" id="title"  placeholder="标题"/>
				  </div>
				  <div id="test-editormd">
	                <textarea style="display:none;" id="content" th:text="${session.user.username}">
					</textarea>
	           	  </div>
				  <button class="btn btn-default" v-on:click="pubBlog()">发布</button>
				
			</div>
			<!-- <div id="layout">
	            <header>
	                <h1>Simple example</h1>
	            </header>
	            <div id="test-editormd">
	                <textarea style="display:none;">
					</textarea>
	            </div>
	        </div> -->
		</div>

	<!--右侧-底部-->
	</div>
	<!--右侧结束-->


<div th:replace="admin/_admin_framt::admin-js">  
</div>
<script>
new Vue({
	el:"#pubBlog",
	data:{
		cateSelected:'',
		blogcates:[]
	},
	created:function(){
		var seft=this;
		//查询全部分类
		$.ajax({
			url:"http://localhost:8888/blogcate",
			type:'get',
			data:{start:1,size:9999},
			//async: false,//同步
			success : function(data){
				if(data.result="success"){
					seft.blogcates=data.data.list;
					seft.cateSelected=seft.blogcates[0].cateid;
				}else{
					alert("获取分类失败："+data.message)
					console.log("Fetch错误:"+data.message);
				}
				//console.log(seft.blogcates);
			},
			fail:function(){
				alert("获取分类请求失败")
			}
		});
	},
	methods:{
		pubBlog:function(){
			var title=$("#title").val();
			var content=$("#content").val();
			var seft=this;
			//获取用户信息
			$.ajax({
				url:"http://localhost:8888/admin/getuser",
				type:'get',
				//async: false,//同步
				success : function(data){
					if(data.result="success"){
						var user=data.data;
						var blog={
								user:user,
								blogcate:{cateid:seft.cateSelected},
								title:title,
								content:content,
								browsenum:0,
								ispub:0,
								createtime:new Date()
						}
						$.ajax({
							url:"http://localhost:8888/blog",
							type:'post',
							data:JSON.stringify(blog),
							contentType:"application/json",
							success : function(data){
								if(data.result="success"){
									alert("发布成功");
								}else
									alert("发布失败"+data.message);
							},
							fail:function(){
								alert("发布请求失败")
							}
						});
						
					}else{
						alert("获取用户失败："+data.message)
						console.log("Fetch错误:"+data.message);
					}
					//console.log(seft.blogcates);
				},
				fail:function(){
					alert("获取分类请求失败")
				}
			});
			console.log(user);
		}
	}
	
});

/*<![CDATA[*/
  	//editormd插件启动js,markdown要先在vue前启动
	testEditor = editormd("test-editormd", {
          width   : "100%",
          height  : 640,
          syncScrolling : "single",
          path    : "../lib/editormd/lib/"
      });
	var user=JSON.parse(sessionStorage.getItem("user"));//获取session的值
   /*]]>*/
</script>
</body>
  
</html>